<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border:10px orange solid;
            padding-top: 100px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!--

        内边距（padding）
            -内容区和边框的距离是内容区
            -一共有四个方向的内边距
                padding-top
                padding-right
                padding-bottom
                padding-left
            - 内边距的设置会影响到盒子的大小
            - 背景颜色会延申到内边距上

        盒子的可见框大小，有内容区，内边距和边框共同决定。
        所以在计算盒子大小时，需要将这三个区域加到一起计算
    -->

    <!--
        外边距（margin）
            - 外边距不会影响盒子的可见框大小
            - 但是外边距会影响盒子的位置
            - 一共有四个方向的外边距
                margin-top
                    - 上外边距，设置一个正值，元素会向下移动
                margin-right
                    - 右外边距，默认情况下不会产生任何情况
                margin-bottom
                    下外边距，设置一个正值，其下边的元素会向下移动
                margin-left
                    - 上外边距，设置一个正值，元素会向右移动
            - margin也可以设置一个负值，则元素会向相反方向移动

        - 元素在页面中是按照自左向右的顺序排列的，
            所以默认情况下，如果我们设置的左和上外边距则会移动
            而设置下和右外边距会移动其他的元素

        margin的简写属性
            margin 可以同时设置四个方向的外边距，用法和padding一样；

        margin会影响到盒子所占的空间大小
    -->

    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>